<script setup>
import { ref, computed } from 'vue'
import { getUserOrder } from '@/api/order'
import { ElMessage } from 'element-plus';



// const dialogFormVisible = ref(false)
const orderList = ref([
    {
        orederId: '',
        createTime: '',
        ordernum: '',
        remark: '',
        goodId: '',
        skuId: '',
        categoryId: '',
        orderId: '',
        goodname: '',
        color: '',
        size: '',
        categoryname: '',
        count: '',
        price: '',
        imageUrl: '',
        discription: '',
        status: '',
        logistics: '',
        paytime: '',
        payment: '',
    }
])

const queryParams = ref({
  pageNum: 1,
  pageSize: 3
})
// 获取用户订单
function getUserOrders() {
  getUserOrder(queryParams.value.pageNum, queryParams.value.pageSize).then(res => {
    console.log( res);
    if (res.code === 200) {
   
            
      orderList.value = res.rows;
      pageTotal.value = res.total;
      pagePages.value = Math.ceil(pageTotal.value / pageSize.value); // 计算总页数
    } else {
      ElMessage.error(res.msg)
    }
  })
  .catch((err) => {
    console.log(err);
  })
}
getUserOrders();

//分页
const pageTotal = ref(0);
const pagePages = ref(1);
const currentPage = ref(1);
const pageSize = ref(3);

// // 计算当前页数据
// const currentOrderlist = computed(() => {
//   const start = (currentPage.value - 1) * pageSize.value;
//   return orderList.value.slice(start, start + pageSize.value);
// });
// 监听页码改变
function handleSizeChange(newSize) {
    pageSize.value = newSize;
    queryParams.value.pageSize = newSize; // 更新查询参数
    // currentPage.value = 1;
    getUserOrders()
    console.log(`每页 ${newSize} 条`)
}
// 监听页码改变
function handleCurrentChange(newPage) {
  if (newPage > 0 && newPage <= pagePages.value) {
    pagePages.value = newPage;
    queryParams.value.pageNum = newPage; // 更新查询参数
    getUserOrders()
    console.log(`当前页: ${newPage}`)
  }
}

// 详情模态框控制
const detailDialog = ref(false)
// 详情数据
const form  = ref({})
const findOrder = (order_id) => {
  // 查找匹配的产品
  form.value = orderList.value.find(order => order.id === order_id);
};
// 详情模态框
function lookDetail(order_id) {
  detailDialog.value = true;
  findOrder(order_id);
}

// 评价模态框控制
const evaluateDialog = ref(false)
// 评价数据
const evaluateForm  = ref({})
// 评价规则
const evaluateRules = {
  evaluate: [
    { required: true, message: '请输入评价', trigger: 'blur' },
    { min: 1, max: 100, message: '长度在 1 到 200 个字符', trigger: 'blur' }
  ]
}

// 评价
function evaluate(order_id,status) {
  // 查找匹配的产品
  if(status === "待评价") {
    evaluateDialog.value = true;
  }
  else {
    ElMessage.warning("暂时无法评价");
  }
}
</script>

<template>
    <el-card class="page-container">
        <h2 style="padding-left: 30px;">订单管理</h2>
        <hr style="margin-bottom: 20px;">
        <div v-for="item in orderList" :key="item.orederId" class="course">
            <ul>
                <div class="good-item">
                    <img :src="item.imageUrl" style="height: 100px; width: 100px;">
                    <li ><h3>{{ item.paytime }}</h3></li>
                    <!-- <li >{{ item.categoryname }}</li> -->
                    <li >{{ item.ordernum }}</li>
                    <li >规格：{{ item.size }}</li>
                    <li >数量：{{ item.count }}</li>
                    <li>总价：{{ item.price * item.count }}</li>
                    <li >{{ item.status }}</li>
                    <el-button style="width: 70px; margin-right: -25px;">
                      <div @click="lookDetail(item.id)">查看详情</div>
                    </el-button>
                    <el-button style="width: 70px; margin-right: -25px;">
                      <div @click="evaluate(item.id,item.status)">评价</div>
                    </el-button>
                    <el-button style="width: 70px; margin-right: 5px;">
                      <div @click="deleteOrder(item.id)">删除</div>
                    </el-button>
                </div>
            </ul>
        </div>
          <!--分页区域-->
          <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[3]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="sizes,prev, pager, next, jumper"
                :total="pageTotal"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                style="position: absolute ;bottom: 30px; margin-top: 30px; margin-left: 20%;"
            />
    </el-card>
    
    <!-- 订单详情窗口 -->
    <el-dialog title="订单详情" v-model="detailDialog" width="45%" style="margin-top: 30px;">
      <el-form :model="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="form.goodname" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <img :src="form.imageUrl" alt="" style="width: 100px; height: 100px;">
        </el-form-item>
        <el-form-item label="商品分类">
          <el-input v-model="form.categoryname" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="商品颜色">
          <el-input v-model="form.color" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="商品规格">
          <el-input v-model="form.size" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input v-model="form.count" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="form.price" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="商品单价">
          <el-input v-model="form.price" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-input v-model="form.status" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="物流信息">
          <el-input v-model="form.logistics" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="订单时间">
          <el-input v-model="form.createTime" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="支付时间">
          <el-input v-model="form.payTime" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="订单备注">
          <el-input v-model="form.remark" :disabled="true"></el-input>
       </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialog = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 评价模态框 -->
     <el-dialog title="评价" v-model="evaluateDialog" width="30%">
      <el-form :model="evaluateForm" ref="evaluateFormRef" :rules="evaluateRules">
        <el-form-item label="评价星级" prop="star">
          <el-rate v-model="evaluateForm.star" :max="5" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :low-threshold="1" :high-threshold="5" show-score></el-rate>
        </el-form-item>
        <el-form-item label="评价内容" prop="content">
          <el-input v-model="evaluateForm.content" type="textarea" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="评价图片">
          <el-upload
            action="#"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :before-upload="beforeUpload"
            :on-change="handleChange"
            :limit="5"
            :file-list="fileList"
            :auto-upload="false"
            :http-request="uploadFile"
          ></el-upload>
        </el-form-item>
      </el-form>
     </el-dialog>
  </template>
  

  <style lang="scss" scoped>

  .page-container {
    min-height: 100%;
    box-sizing: border-box;
    position: relative;
  
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .course {
    height: 120px;
    padding: 0; /* 去掉默认的内边距 */
    list-style-type: none; /* 去掉默认的列表样式 */
    align-items: center; /* 垂直居中对齐 */

    .good-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #ffecec;
      border-radius: 5px;
    }

    ul{
        height: 120px;

        li{
            padding-top: -20px;
            display: inline-block; /* 设置为 inline-block */
            margin: 0 10px; /* 项之间的间距 */
        }
    } 
  }
  .img {
    width: 100px;
    height: 100px;
  }
  </style>
  